<template>

  <div>
    <h1>产品集合列表</h1>

    <p>
      考虑再三，最终决定产品集合不单独暴露。这也意味着其不可复用，不同的展区关联同一个产品集合时，数据库中存储的两个完全相同的副本。<br>
      该页面是一个无效的页面
    </p>

    <Row type="flex" justify="end" :gutter="16" >
      <Select v-model="currentStandType" style="max-width: 200px;margin-right: 1rem" >
        <Option v-for="item in standTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="info"  icon="ios-search" >查询</Button>
    </Row>

    <List border style="margin: 1rem 0rem">
      <ListItem v-for="(item,index) in collections" class="list_item" >
        <div class="item_top">
          <p style="font-weight: bold">{{ item.title }}</p>
          <div>
            <Tag color="purple" v-if="item.type===100">Category类型</Tag>
            <Tag color="geekblue" v-if="item.type===200">查询类型</Tag>
            <Tag color="cyan" v-if="item.type===300">产品类型</Tag>
          </div>


        </div>
        <p style="width: 100%;text-align: left">
         {{item.desc}}
        </p>
        <div class="item_bottom" >
          <p>
            <Tag type="border">已关联5个展区</Tag>
          </p>
          <Button size="small">编辑</Button>
        </div>

      </ListItem>
    </List>


  </div>

</template>

<script>
export default {
  data(){
    return {
      currentStandType:100,
      standTypes:[
        {  value: 100,label: 'Category类型'},
        {  value: 200,label: '查询类型'},
        {  value: 300,label: '产品类型'}
      ],
      collections:[
        {
          title:"Category类型Demo",
          desc:'关联women/dress分类的产品',
          type:100
        },
        {
          title:"查询类型的Demo",
          desc:'搜索词：dress 条件：Price: <$18 Filters: Women + S',
          type:200
        },
        {
          title:"产品类型",
          desc:'热款的Women wedding dress',
          type:300
        }
      ]
    }

  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base.less";

.list_item{
  .flex-colum-wrap;
  .item_top{
    width: 100%;
    .flex-row-wrap;
    justify-content: space-between;

    p{
      flex-grow: 2;
      text-align: left;
    }
  }

  .item_bottom{
    width: 100%;
    .flex-row-wrap;
    justify-content: space-between;
    p{
      flex-grow: 2;
      text-align: left;
    }
  }


}


</style>
